<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
    <title>数据统计汇总</title>
    <meta name="decorator" content="default"/>
    <script src="https://cdn.staticfile.org/Chart.js/3.9.1/chart.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/jquery/jquery-1.8.3.min.js"></script>
</head>
<body>
<div style="margin-top: 50px;float: left;width: 100%">
    <div style="float: left">
        <div style="margin-left: 90px; font-weight: bold; font-size: 17px" >年龄分布</div>
        <div style="float: left; margin-left: 50px">
            <canvas id="myChart" width="400" height="300"></canvas>
        </div>
    </div>
    <div  style="float: left">
        <div style="margin-left: 170px; font-weight: bold; font-size: 17px" >性别分布</div>
        <div style="float: left; margin-left: 150px">
            <canvas id="myChart2"></canvas>
        </div>
    </div>
    <div  style="float: left">
        <div style="margin-left: 170px; font-weight: bold; font-size: 17px" >BMI分布</div>
        <div style="float: left; margin-left: 150px">
            <canvas id="myChart4" width="400" height="300"></canvas>
        </div>
    </div>
</div>
<div style="margin-top: 50px;float: left;width: 650px;margin-bottom: 50px">
    <div style="margin-left: 90px; font-weight: bold; font-size: 17px" >数据采集</div>
    <div style="float: left; margin-left: 50px">
        <canvas id="myChart5" width="650" height="450"></canvas>
    </div>
</div>
<div style="margin-top: 70px; margin-left:50px;float: left;width: 650px; margin-bottom: 50px">
    <div style="float: left; margin-left: 100px">
        <canvas id="myChart3" width="650" height="450"></canvas>
    </div>
</div>

<script>

    $(document).ready(function() {

        var result = JSON.parse('${result}')

        console.log('result', result)
        console.log('result', result.age_0_18)

        ctx = document.getElementById('myChart');
        data = {
            labels: [
                '0-18',
                '18-40',
                '40-65',
                '65+',
            ],
            datasets: [{
                label: '年龄分部',
                data: [result.age_0_18, result.age_18_40, result.age_40_65, result.age_65_100],
                backgroundColor: [
                    'rgb(54,156,231)',
                    'rgb(255,118,147)',
                    'rgb(252,197,78)',
                    'rgb(178,245,77)'
                ],
                hoverOffset: 4
            }]
        };
        config = {
            type: 'pie',
            data: data,
            options: {
                title: {
                    display: true,
                    text: "年龄分部",
                    position:"top"
                },
                responsive: true, // 设置图表为响应式，根据屏幕窗口变化而变化
                maintainAspectRatio: false,// 保持图表原有比例
                animation: {
                    animateScale: true,
                    animateRotate: true
                },
                legend: {
                    position: 'top',
                },
            }
        };



        myChart = new Chart(ctx, config);


        ctx2 = document.getElementById('myChart2');
        data2 = {
            labels: [
                '男',
                '女'
            ],
            datasets: [{
                label: '性别分布',
                data: [result.sex_1,result.sex_2],
                backgroundColor: [
                    'rgb(54, 162, 235)',
                    'rgb(255, 99, 132)'
                ],
                hoverOffset: 4
            }]
        };
        config2 = {
            type: 'doughnut',
            data: data2,
            options: {
                // responsive: true, // 设置图表为响应式，根据屏幕窗口变化而变化
                maintainAspectRatio: false,// 保持图表原有比例
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero:true
                        }
                    }]
                }
            }
        };
        myChart2 = new Chart(ctx2, config2);


        ctx4 = document.getElementById('myChart4');
        data4 = {
            labels: [
                '0-18.5',
                '18.5-24',
                '24-28',
                '28+',
            ],
            datasets: [{
                label: 'BMI分布',
                data: [result.bmi_18_5, result.bmi_24, result.bmi_28, result.bmi_up],
                backgroundColor: [
                    'rgb(54,156,231)',
                    'rgb(255,118,147)',
                    'rgb(252,197,78)',
                    'rgb(178,245,77)'
                ],
                hoverOffset: 4
            }]
        };
        config4 = {
            type: 'pie',
            data: data4,
            options: {
                title: {
                    display: true,
                    text: "年龄分部",
                    position:"top"
                },
                responsive: true, // 设置图表为响应式，根据屏幕窗口变化而变化
                maintainAspectRatio: false,// 保持图表原有比例
                animation: {
                    animateScale: true,
                    animateRotate: true
                },
                legend: {
                    position: 'top',
                },
            }
        };



        myChart4 = new Chart(ctx4, config4);


        ctx3 = document.getElementById('myChart3');
        data3 = {
            labels: ['6日前', '5日前','4日前', '3日前', '2日前', '1日前', `今日`],
            datasets: [{
                type: 'bar',
                label: '采集新增',
                data: [result.date_7, result.date_6, result.date_5, result.date_4, result.date_3, result.date_2, result.date_1],
                borderColor: 'rgb(255, 99, 132)',
                backgroundColor: 'rgba(255, 99, 132, 0.2)',
                borderColor: [     //设置每个柱形图边框线条颜色
                    'rgb(255, 99, 132)',

                ],
                borderWidth: 1     // 设置线条宽度
            }
            // , {
            //     type: 'line',
            //     label: '采集新增',
            //     data: [result.date_7, result.date_6, result.date_5, result.date_4, result.date_3, result.date_2, result.date_1],
            //     fill: false,
            //     borderColor: 'rgb(54, 162, 235)'
            // }
            ]
        };
        config3 = {
            type: 'scatter',
            data: data3,
            options: {
                responsive: true, // 设置图表为响应式，根据屏幕窗口变化而变化
                maintainAspectRatio: false,// 保持图表原有比例
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        };
        myChart3 = new Chart(ctx3, config3);



        ctx5 = document.getElementById('myChart5');
        data5 = {
            labels: [
                '采集中',
                '采集完成'
            ],
            datasets: [{
                axis: 'y',
                label: '采集状态',
                data: [result.status_ing, result.status_ok],
                fill: false,
                backgroundColor: [      // 设置每个柱形图的背景颜色
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                ],
                borderColor: [     //设置每个柱形图边框线条颜色
                    'rgb(255, 99, 132)',
                    'rgb(54, 162, 235)',

                ],
                borderWidth: 1     // 设置线条宽度
            }]

        };
        config5 = {
            type: 'bar',
            data: data5,
            options: {
                responsive: true, // 设置图表为响应式，根据屏幕窗口变化而变化
                maintainAspectRatio: false,// 保持图表原有比例,
                indexAxis: 'y',
            }
        };
        myChart5 = new Chart(ctx5, config5);

    });







</script>


</body>


</html>
